// npm i xlsx
import React, { useRef, useState } from 'react'
import { Button,Table,Image } from 'antd'
import *  as XLSX from 'xlsx'
export default function Import() {
  const [proList, setProList]=useState([])
  const inpRef = useRef()
  const columns = [
    { title: '商品名称', dataIndex: 'proname' },
    { title: '商品图片', dataIndex: 'img1',key:'img1',
      render(v,r,i){
        return <Image src={v} style={{ width: 100 }} alt="" />
      }
     },

  ]
  const changeFile = (e) => {
    // console.log(e.target.files);
    // 1.获取选择文件
    const file = e.target.files[0]
    // 2.创建文件加载器
    const reader = new FileReader()
    // 3.文件转成数据流
    reader.readAsArrayBuffer(file)
    // 4.加载完成后的回调
    reader.onload = function () {
      // 5.将数据流转成js对象
      let data= XLSX.read(reader.result, { type: 'buffer' })
      // console.log(data);
      // 6.读取需要的工作表1数据
      data= data.Sheets['工作表1']
      // data= data.Sheets['商品列表1']
      // console.log(data);
      // 7.将工作表数据转换成json对象
      data= XLSX.utils.sheet_to_json(data)
      console.log(data);
      setProList(data)
    }
  }
  return (
    <div>
      <input hidden type="file" ref={inpRef} onChange={(e) => {
        changeFile(e)
      }} />
      <Button onClick={() => { inpRef.current.click() }}>选择文件</Button>
      <Table
      dataSource={proList}
      columns={columns}
      rowKey={'proname'}
      scroll={{y:450}}
      ></Table>
    </div>
  )
}
